<template>
	<view>
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="规则说明" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->
		<view class="page_bgtu">
			<image :src="BestImgUrl + 'member/zhuanqian_bg.png'"></image>
		</view>

		<view class="page_guize">
			<view class="title_sub">
				每月邀请好友探店，你可获得奖励
			</view>
			
			
			
			
			
			
			
			<invitationRules></invitationRules>
			
			
			
			
			
			
			
			<view class="yq_shuom">
				<view class="page_title">
					<image :src="BestImgUrl + 'member/Unionl.png'" mode="widthFix"></image>
					<view>邀请说明</view>
					<image :src="BestImgUrl + 'member/Unionr.png'" mode="widthFix"></image>
				</view>

				<view class="shuoming">
					<u-parse :html="guizeInfo"></u-parse>
					<!-- <rich-text :nodes="guizeInfo"></rich-text> -->
					<!--<view class="sm_info">
						<view>
							比如：你本月邀请了160个好友，你的等级是6级。前1-9个好友的前3单分别奖励你2、3、5元，从第4单开始，每单奖励你0.1元。以此类推，第150-160个好友完成前3单分别奖励你6、7、8元，从第4单开始，每单奖励你0.6元。
						</view>
					</view>
					<view class="sm_title">2.你的等级本月有效，下个月重新计算。</view>
					<view class="sm_title">3.平台保留活动最终解释权。</view>-->
				</view>
			</view>
		</view>


		<view class="guize_list">
			<view class="lijipay">
				<u-button hover-class="none" type="primary" shape="circle" :ripple="false" @click="ToShareposters()">立即邀请</u-button>
			</view>
		</view>



		<!--<invitePopup :fenxiangshow="FenxiangShow" @backHome='openFenx'></invitePopup>-->


	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				FenxiangShow: false,
				guizeInfo: "",
				BestImgUrl: app.globalData.imgurlBwc,
				one: {}, //等级1
				two: {}, //等级2
				three: {}, //等级3
				four: {}, //等级4
				five: {}, //等级5
				six: {}, //等级6
				seven: {}, //等级7

				makemoneydata: 1
				

			}
		},
		onShow() {
			this.getguize();
			this.getmakemoney();
			this.getMyCard();
		},
		methods: {
			getMyCard(){
				let that = this
				that.$api.GetMyVipCard({
				
				}).then(res => {
					console.log('我开通的会员卡', res.data.result)
					that.makemoneydata = res.data.result.vip_level
				}).catch(err => {})
			},
			//获取我的明细
			getmakemoney() {
				let that = this
				that.$api.Getmakemoney({

				}).then(res => {
					that.makemoneydata = res.data.result
				}).catch(err => {
					/*uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});*/
				})
			},
			getguize() {
				let that = this
				that.$api.getInvitationRules({
					page: 1,
					city: uni.getStorageSync('CityName'),
				}).then(res => {
					console.log(res.data.result)
					that.guizeInfo = res.data.result.rules
					// this.one = res.data.result['1']
					// this.two = res.data.result['2']
					// this.three = res.data.result['3']
					// this.four = res.data.result['4']
					// this.five = res.data.result['5']
					// this.six = res.data.result['6']
					// this.seven = res.data.result['7']
				}).catch(err => {
					/*uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});*/
				})
			},
			openFenx(e) {
				let that = this
				if (e == true) {
					that.FenxiangShow = false
				} else {
					that.FenxiangShow = true
				}
			},
			ToShareposters() {
				let that = this
				let token = uni.getStorageSync('token')
				if (!token) {
					
					uni.showModal({
						title: '提示',
						content: '您还未登陆,登录后可生成个人专属海报',
						confirmColor: '#FF4910',
						confirmText: '去登录',
						success: function (res) {
							if (res.confirm) {
								
								// #ifdef APP-PLUS
								//this.$PublicFunction.PhoneNumLogonTrue()
								uni.navigateTo({
									url: '/subpackageB/pages/newAppLogin/newAppLogin'
								})
								// #endif
												
								// #ifdef H5
								uni.switchTab({
									url: '/pages/me/me'
								})
								// #endif
								
								// #ifdef MP-WEIXIN
								uni.navigateTo({
									url: '/pages/logon/logon'
								})
								// #endif
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				} else {
					uni.navigateTo({
						url: '/subpackageB/pages/Shareposters/Shareposters'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(to top, #feaa72, #feaa72) !important;
	}

	/deep/ .u-th {
		background-color: #FFDFD4 !important;
		font-size: 24rpx !important;
		padding: 20rpx 0 !important;
		color: #FF4910 !important;
	}

	/deep/ .u-tr {
		position: relative;
	}

	.tag_box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 62rpx;
		line-height: 62rpx;
		width: 400rpx;
		color: transparent;
		//background-color: #feaa72;
		border-radius: 200rpx;
		padding: 4rpx 10rpx;
	}

	.page_bgtu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;

		image {
			width: 100%;
			height: 800rpx;
		}
	}

	.page_guize {
		position: relative;

		/* #ifdef H5 */
		top: 0;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */

		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */


		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 2;
	}

	.biaoge_box {
		padding: 30rpx;

		/deep/ .u-td {
			height: 31px;
		}
	}

	.shuoming {
		.sm_title {
			color: #333333;
			margin: 15rpx 0;
		}

		.sm_info {
			color: #333333;
			margin: 20rpx 0;
		}

		.sm_info2 {
			color: #333333;
		}
	}

	.yq_shuom {
		background-color: #FFF1E5;
		border-radius: 20rpx;
		width: 92%;
		margin: 16rpx auto 120rpx;
		padding: 30rpx 30rpx 20rpx 30rpx;
	}

	.lijipay {
		width: 90%;
		margin-top: 0;
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 2%;
		z-index: 6;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
		}
	}

	.guize_list {
		padding: 20rpx 36rpx 0 36rpx;

		image {
			width: 100%;
		}
	}

	.title_sub {
		text-align: center;
		font-size: 34rpx;
		margin: 50rpx 0 20rpx 0;
		font-weight: bold;
		color: #ffffff;
	}

	.page_title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 0 30rpx 0;

		image {
			width: 50rpx;
		}

		view {
			font-weight: bold;
			font-size: 36rpx;
			margin: 0 20rpx;
			color: #FF773A;
		}
	}
</style>